<template>
  <el-button type="primary" @click="dialogVisible = true">添加员工</el-button>
  <el-dialog
      v-model="dialogVisible"
      title="添加员工"
      width="500"
  >
    <span>姓名：<el-input v-model="form2.name"></el-input></span>
    <span>电话：<el-input v-model="form2.phone"></el-input></span>
    <span>职业：<el-input v-model="form2.sort"></el-input></span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="appendEmployee">
          添加员工
        </el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog
      v-model="dialogVisible2"
      title="修改信息"
      width="500"
  >
    <span>姓名：<el-input v-model="form.name"></el-input></span>
    <span>电话：<el-input v-model="form.phone"></el-input></span>
    <span>职业：<el-input v-model="form.sort"></el-input></span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取消</el-button>
        <el-button type="primary" @click="updateEmployee">
          修改员工
        </el-button>
      </div>
    </template>
  </el-dialog>
  <div>
    <el-table :data="EmployeeList" border stripe  style="width: 90%">
      <el-table-column prop="employeeId" label="ID" width="100" />
      <el-table-column prop="name" label="姓名" width="100" />
      <el-table-column prop="sort" label="职业" width="100"/>
      <el-table-column prop="phone" label="电话" width="100"/>
      <el-table-column prop="createdTime" label="加入时间" width="180"/>
      <el-table-column fixed="right" label="Operations" min-width="120">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="dialogVisible3 = true">
            删除
          </el-button>
          <el-button link type="primary" size="small" @click="handleUpdateEmpInfo(scope.row)">修改</el-button>
          <el-dialog
              v-model="dialogVisible3"
              title="修改信息"
              width="500"
          >
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="dialogVisible3 = false">取消</el-button>
                <el-button type="primary" @click="deleteEmployee(scope.row)">
                  确认删除
                </el-button>
              </div>
            </template>
          </el-dialog>
        </template>
      </el-table-column>

    </el-table>
  </div>

</template>

<script>
import {onMounted, ref} from "vue";
import {AppendEmployee, DeleteEmployee, GetEmployeeList, UpdateEmployee} from "../../api/BSideApi";
import {ElNotification} from "element-plus";

  export default {
    name: 'EmployeeView',
    setup(){
      const EmployeeList = ref([])
      const dialogVisible = ref(false)
      const dialogVisible2 = ref(false)
      const dialogVisible3 = ref(false)

      onMounted(()=>{
        getEmployeeList()
      })

      async function getEmployeeList() {
        EmployeeList.value = await GetEmployeeList();
        if (!EmployeeList.value){
          ElNotification({
            title: 'Warning',
            message: '未查询到数据',
            type: 'warning',
          })
        }
      }

      async function deleteEmployee(row) {
        const v = await DeleteEmployee(row.employeeId)
        if(!v){
          ElNotification({
            title: '删除成功',
            type: 'success',
          })
          await getEmployeeList()
        }else {
          ElNotification({
            title: '删除失败',
            type: 'error',
          })
        }
        dialogVisible3.value = false
      }

      async function appendEmployee() {
        if(!form2.value.name) {
          ElNotification({
            title: '请输入姓名',
            type: 'warning',
          })
          return
        }
        if (!form2.value.sort){
          ElNotification({
            title: '请输入职业',
            type: 'warning',
          })
          return
        }
        form2.value.section = "精手";
        const v = await AppendEmployee(form2.value);
        if (!v){
          dialogVisible.value = false;
          ElNotification({
            title: '添加成功',
            type: 'success',
          })
          await getEmployeeList();
        }
      }

      const form = ref({
        employeeId: undefined,
        name: "",
        phone: "",
        sort: "",
        section: "部门1",
        createdTime: ''
      });

      const form2 = ref({
        name: "",
        phone: "",
        sort: "",
        section: "",
      });
      function handleUpdateEmpInfo(row){
        form.value.employeeId = row.employeeId;
        form.value.name = row.name;
        form.value.phone = row.phone;
        form.value.sort = row.sort;
        form.value.createTime = row.createdTime;
        dialogVisible2.value = true;
      }

      async function updateEmployee() {
        const v = await UpdateEmployee(form.value);
        if (!v) {
          ElNotification({
            title: '修改成功',
            type: 'success',
          })
          dialogVisible2.value =false;
        }
      }

      return {
        EmployeeList,
        dialogVisible,
        dialogVisible3,
        deleteEmployee,
        handleUpdateEmpInfo,
        dialogVisible2,
        form2,
        appendEmployee,
        form,
        updateEmployee,
      }
    }
  }
</script>

<style scoped>

</style>
